<template>
  <view>
    <u-tabs :list="tabs" :is-scroll="false" :current="current" active-color="#88e4ee" @change="change"></u-tabs>

    <view class="u-p-24">
      <view class="gap-24">
        <order status="等待买家付款" status-color="#88e4ee">
          <view class="flex-row justify-end align-center u-p-t-24" slot="btns" @click="$goto('/pages/order/ziti-detail')">
            <my-btn class="u-m-l-16" :size="[160, 60, 24]" border="1rpx solid #000" inline round>取消订单</my-btn>
            <my-btn class="u-m-l-16" :size="[140, 60, 24]" bg="linear-gradient(0deg, #72E0EB 0%, #95E6FE 100%)" color="#fff"
              inline round>付款</my-btn>
          </view>
        </order>
      </view>

      <view class="gap-24">
        <order status="预约时间" status-color="#88e4ee">
          <view class="flex-row justify-end align-center u-p-t-24" slot="btns" @click="$goto('/pages/order/ziti-detail')">
            <my-btn class="u-m-l-16" :size="[160, 60, 24]" border="1rpx solid #000" inline round>前往商家</my-btn>
            <my-btn class="u-m-l-16" :size="[160, 60, 24]" bg="linear-gradient(0deg, #72E0EB 0%, #95E6FE 100%)" color="#fff"
              inline round>联系商家</my-btn>
          </view>
        </order>
      </view>
    </view>
  </view>
</template>

<script>
  import order from './components/order-col.vue'
  export default {
    components: {
      order
    },
    data() {
      return {
        tabs: [{
            name: '全部'
          },
          {
            name: '待自提'
          }
        ],
        current: 0,
      };
    },
    methods: {
      change(index) {
        this.current = index;
      },
    }
  }
</script>

<style lang="scss">
  .card {
    background: #fff;
    border-radius: 36rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;

    .top {
      display: flex;
      align-items: center;

      .name {
        font-size: 26rpx;
        width: 420rpx;
        padding: 0 16rpx;
      }

      .status {
        color: #6FDEEA;
        font-size: 24rpx;
        width: 166rpx;
        text-align: right;
      }
    }

    .items {
      padding-top: 24rpx;

      .item {
        padding-bottom: 24rpx;
        display: flex;
        justify-content: space-between;
      }

      .pic {
        width: 160rpx;
        height: 160rpx;
        object-fit: cover;
        background: #e3dbda;
        border-radius: 8rpx;
      }

      .info {
        width: 470rpx;
      }

      .counts {
        display: flex;
        align-items: center;
        padding: 16rpx 0;
        font-size: 24rpx;
        color: #A3A3A3;

        .tag {
          background: #f0f0f0;
          margin-right: 16rpx;
          padding: 8rpx 16rpx;
          border-radius: 22rpx;
        }
      }

      .name,
      .price {
        font-size: 28rpx;
      }
    }

    .btns {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
</style>
